<template>
  <div class="app-container">
    <el-row class="margin-bottom">
      <el-upload
        action=""
        :show-file-list="false"
        :auto-upload="false"
        :on-change="uploadImg"
      >
        <el-button size="mini" type="primary">上传图片</el-button>
      </el-upload>
    </el-row>
    <el-row>
      <div>
        <p>文件名称: {{file.name}}</p>
        <p>文件大小: {{formatSizeHuman(file.size)}}</p>
      </div>
      <el-form size="small" :inline="true">
        <el-form-item label="图像质量">
          <el-input v-model="option.outputSize" clearable  />
        </el-form-item>
        <el-form-item label="限宽">
          <el-input v-model="option.maxImgSize" clearable />
        </el-form-item>

        <el-button icon="el-icon-plus" circle size="mini" @click="changeScale(1)"></el-button>
        <el-button icon="el-icon-minus" circle size="mini" @click="changeScale(-1)"></el-button>
        <el-button icon="el-icon-download" circle size="mini" @click="down('blob')"></el-button>
        <el-button icon="el-icon-refresh-left" circle size="mini"  @click="rotateLeft"></el-button>
        <el-button icon="el-icon-refresh-right" circle size="mini"  @click="rotateRight"></el-button>

        <el-button icon="el-icon-video-play" circle size="mini"  @click="startCrop"></el-button>
        <el-button icon="el-icon-video-pause" circle size="mini"  @click="stopCrop"></el-button>
        <el-button icon="el-icon-delete" circle size="mini"  @click="cleanCrop"></el-button>
      </el-form>
    </el-row>
    <el-row>
      <div class="cropper">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="option.info"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          @realTime="realTime"
        ></vueCropper>
      </div>
    </el-row>

  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

import {formatSizeHuman} from '@/utils'

export default {
  name: 'CropperImage',
  components: { VueCropper },
  data(){
    return {
      avatarURL: require("@/assets/404_images/404_cloud.png"),
      editAvatarDialog: false,
      previews: {},
      file: {},
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        maxImgSize: 100,
        full: true, // 输出原图比例截图 props名full
        outputType: 'png', // 裁剪生成额图片的格式
        canMove: true,  // 能否拖动图片
        original: false,  // 上传图片是否显示原始宽高
        canMoveBox: true,  // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        fixedBox: false // 截图框固定大小
      },
    }
  },
  methods: {
    formatSizeHuman,
    startCrop(){
      this.$refs.cropper.startCrop()
    },
    stopCrop(){
      this.$refs.cropper.stopCrop()
    },
    cleanCrop(){
      this.$refs.cropper.clearCrop()
    },
    editAvatar() {
      this.editAvatarDialog = true
      this.option.img = this.avatarURL
    },

// 保存图片修改
    saveEditAvatar() {
      this.editAvatarDialog = false
      this.finish('blob')
    },
// 放大/缩小
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
// 左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
// 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
// 保存上传图片
    finish(type) {
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.avatarURL = window.URL.createObjectURL(data)
          //访问接口保存到数据库写这儿!
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          //访问接口保存到数据库写这儿!
        })
      }
    },
// 实时预览函数
    realTime(data) {
      this.previews = data
    },
// 下载图片
    down(type) {
      var aLink = document.createElement('a')
      aLink.download = this.file.name + (Math.random() * 1000) + '.'+this.option.outputType;
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          aLink.href = data;
          aLink.click()
        })
      }
    },
// 更换图片--上传本地图片
    uploadImg(file) {
      this.file  = file;
      let _this = this;
      let reader = new FileReader();
      reader.onload = (e) => {
        let data;
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        _this.option.img = data
      }
      // 转化为base64
      // reader.readAsDataURL(file.raw)
      // 转化为blob
      reader.readAsArrayBuffer(file.raw);
    },
  }
}
</script>

<style scoped>
.previewBox {
  border: 1px solid #ccc;
  background-color: #ccc;

  width: 40vw;
  height: 80vh;
}

.preview {
}

.cropper {
  width: 40vw;
  height: 60vh;

  margin-bottom: 10px;
}
</style>
